<template>
    <div class="content-container">
        <Title :icon="'line-chart-fill'" :title="'地域分布'"></Title>
        <div class="h-510px ml-16px mr-16px">
            <div class="w-full h-full" id="region">

            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts' // 新的地图数据包
import china from '@/utils/china.json'// 新的地图数据包

echarts.registerMap('china', china)

onMounted(() => {
    const chartDom = document.getElementById('region')
    if (!chartDom) return
    const myChart = echarts.init(chartDom)

    const option = {
        title: {
            text: '中国地图示例',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        visualMap: {
            min: 0,
            max: 1000,
            left: 'left',
            top: 'bottom',
            text: ['高值', '低值'],
            calculable: true
        },
        series: [
            {
                name: '示例数据',
                type: 'map',
                map: 'china',
                zoom: 1.2,
                center: [104.114129, 37.550339],
                emphasis: {
                    label: { show: true }
                },
                data: [
                    { name: '北京市', value: 100 },
                    { name: '上海市', value: 200 },
                    { name: '广东省', value: 300 },
                    { name: '四川省', value: 400 }
                ]
            }
        ]
    }

    myChart.setOption(option)
})
</script>

<style scoped></style>